<template>
  <div class="authContainer">
    <div class="timeCont" v-if="!showTimeOut && showCont">
      <div class="gzMask" v-if="showGzMask">
        <div class="gzImgCont">
          <div class="erweima">
            <img src="/img/erweima.jpg" />
          </div>
          <div class="erweimaText">《马上电子签》</div>
          <div class="erweimaText">请关注公众号之后签约</div>
          <div class="erweimaText">长按二维码识别关注</div>
        </div>
      </div>
      <div class="bannerCont">
        <img class="bannerImg" src="/img/signBanner.png" />
      </div>
      <div class="formDes" v-if="signId">
        <div class="formTitle">
          <div>借款合同信息</div>
        </div>
        <div class="formInput">
          <div class="inputName">合同编号</div>
          <div class="authVal">{{ orderInfo.contract_number }}</div>
        </div>
        <div class="formInput">
          <div class="inputName">借款金额</div>
          <div class="authVal">{{ orderInfo.loan_money }}</div>
        </div>
        <div class="formInput">
          <div class="inputName">还款金额</div>
          <div class="authVal">{{ orderInfo.repayment_money }}</div>
        </div>
        <div class="formInput">
          <div class="inputName">年化利率</div>
          <div class="authVal">{{ orderInfo.interest_rate }}%</div>
        </div>
        <div class="formInput">
          <div class="inputName">借款日期</div>
          <div class="authVal">{{ orderInfo.loan_date }}</div>
        </div>
        <div class="formInput">
          <div class="inputName">还款日期</div>
          <div class="authVal">{{ orderInfo.repayment_date }}</div>
        </div>
        <div class="formInput">
          <div class="inputName">借款用途</div>
          <div class="authVal">{{ orderInfo.loan_use }}</div>
        </div>
        <div class="formInput">
          <div class="inputName">其他说明</div>
          <div class="authVal">
            {{ orderInfo.other_content }}
          </div>
        </div>
      </div>
      <div class="formDes hasTop" v-if="signId">
        <div class="formTitle">
          <div>{{ orderInfo.type == 1 ? "借款方" : "出借方" }} 信息</div>
        </div>
        <div class="formInput">
          <div class="inputName">姓名</div>
          <div class="authVal">{{ orderInfo.name }}</div>
        </div>
        <div class="formInput">
          <div class="inputName">手机号</div>
          <div class="authVal">{{ orderInfo.mobile }}</div>
        </div>
        <div class="formInput">
          <div class="inputName">证件类型</div>
          <div class="authVal">居民身份证</div>
        </div>
        <div class="formInput">
          <div class="inputName">身份证号</div>
          <div class="authVal">{{ orderInfo.idcard }}</div>
        </div>
        <div class="formInput">
          <div class="inputName">电子签名</div>
          <div class="authVal">
            <img class="signImg" :src="orderInfo.signature" />
          </div>
        </div>
      </div>
      <div class="formCont" v-if="!signId">
        <div class="formTitle">合同签约信息表</div>
        <div class="formInput">
          <div class="inputName">
            <div class="mustIcon">*</div>
            <div class="inputNameText">借款金额</div>
          </div>
          <input
            v-model="formInfo.loan_money"
            type="number"
            maxlength="10"
            @change="setRepayment_money()"
            placeholder="请输入借款金额"
          />
          <div>元</div>
        </div>

        <div class="formInput">
          <div class="inputName">
            <div class="mustIcon">*</div>
            <div class="inputNameText">年化利率</div>
          </div>
          <input
            v-model="formInfo.interest_rate"
            type="number"
            @change="setRepayment_money()"
            maxlength="5"
            placeholder="请输入年化利率"
          />
          <div>%</div>
        </div>
        <div class="formInput">
          <div class="inputName">
            <div class="mustIcon">*</div>
            <div class="inputNameText">借款日期</div>
          </div>
          <div class="inputOut">
            <div class="inputMask" @click="show_loan_date = true"></div>
            <input v-model="formInfo.loan_date" placeholder="请选择借款日期" />
          </div>
          <div @click="show_loan_date = true" class="iconfont icon-xiala"></div>
          <van-calendar
            @confirm="loan_date_comfir"
            v-model:show="show_loan_date"
            :show-confirm="false"
          />
        </div>
        <div class="formInput">
          <div class="inputName">
            <div class="mustIcon">*</div>
            <div class="inputNameText">还款日期</div>
          </div>
          <div class="inputOut">
            <div class="inputMask" @click="show_repayment_date = true"></div>
            <input
              v-model="formInfo.repayment_date"
              placeholder="请选择还款日期"
            />
          </div>
          <div
            @click="show_repayment_date = true"
            class="iconfont icon-xiala"
          ></div>
          <van-calendar
            @confirm="repayment_date_comfir"
            v-model:show="show_repayment_date"
            :show-confirm="false"
          />
        </div>
        <div class="formInput">
          <div class="inputName">
            <div class="mustIcon">*</div>
            <div class="inputNameText">还款金额</div>
          </div>
          <input
            v-model="formInfo.repayment_money"
            type="number"
            disabled
            maxlength="10"
            placeholder="请输入还款金额"
          />
          <div>元</div>
        </div>
        <div class="formInput">
          <div class="inputName">
            <div class="mustIcon">*</div>
            <div class="inputNameText">借款用途</div>
          </div>
          <input
            v-model="formInfo.loan_use"
            type="text"
            maxlength="50"
            placeholder="请输入借款用途"
          />
        </div>
      </div>

      <div class="formCont hasTop">
        <div class="formTitle">
          {{ userType == 1 ? "借款方" : "出借方" }}信息
        </div>
        <div class="formInput">
          <div class="inputName">
            <div class="mustIcon">*</div>
            <div class="inputNameText">证件类型</div>
          </div>
          <input
            v-model="formInfo.idcarType"
            type="text"
            disabled
            maxlength="20"
          />
        </div>
        <div class="formInput">
          <div class="inputName">
            <div class="mustIcon">*</div>
            <div class="inputNameText">姓名</div>
          </div>
          <input
            v-model="formInfo.name"
            type="text"
            maxlength="20"
            placeholder="请输入姓名"
          />
        </div>
        <div class="formInput">
          <div class="inputName">
            <div class="mustIcon">*</div>
            <div class="inputNameText">手机号</div>
          </div>
          <input
            v-model="formInfo.mobile"
            type="tel"
            maxlength="11"
            placeholder="请输入手机号"
          />
        </div>
        <div class="formInput">
          <div class="inputName">
            <div class="mustIcon">*</div>
            <div class="inputNameText">身份证号</div>
          </div>
          <input
            v-model="formInfo.idcard"
            type="text"
            maxlength="20"
            placeholder="请输入身份证号"
          />
        </div>
        <div class="formInput">
          <div class="inputName">
            <div class="mustIcon">*</div>
            <div class="inputNameText">电子签名</div>
          </div>
          <div class="inputOut">
            <div class="inputMask" @click="showCavas = true"></div>
            <input v-model="signText" placeholder="点击进行电子签名" />
          </div>
          <div @click="showCavas = true" class="iconfont icon-xiala"></div>
        </div>
      </div>
      <div class="formCont hasTop" v-if="!signId">
        <div class="formTitle flexTitle">
          <div class="formTitleMust">
            <div>其他说明</div>
          </div>
        </div>
        <div class="formArea">
          <van-field
            v-model="formInfo.other_content"
            rows="4"
            autosize
            id="myTextarea"
            style="background: none; font-size: 0.7rem"
            type="textarea"
            maxlength="1000"
            placeholder="请描述借款合同其他说明。"
            show-word-limit
          />
        </div>
      </div>
      <div class="tipCont">
        <div class="linkCont">
          <div
            @click="checked = !checked"
            :class="
              checked
                ? 'isCheck checkBtn iconfont icon-gouxuan1'
                : 'checkBtn iconfont icon-gouxuan1'
            "
          ></div>
          <div>
            我已阅读并同意<span class="linkText" @click="showTip = true"
              >《平台协议》</span
            >
          </div>
        </div>
      </div>
      <div class="saveBtn" @click="saveFn">确认提交</div>
    </div>
    <van-popup v-model:show="showCavas" round position="bottom">
      <div class="maskCont">
        <div class="signCont">
          <canvas
            ref="canvas"
            style="border: 1px dashed #999"
            :width="canvasWidth"
            :height="canvasHeight"
            @mousedown="startDrawing"
            @mousemove="draw"
            @mouseup="stopDrawing"
            @touchstart="startDrawingTouch"
            @touchmove="drawTouch"
            @touchend="stopDrawing"
          >
          </canvas>
        </div>
        <div class="cavasTip">请在上方空白区进行签名</div>
        <div class="cavasCtrl">
          <div class="maskBtn plainBtn" @click="clearCanvas">清空</div>
          <div class="maskBtn" @click="saveSignature">确认签名</div>
        </div>
      </div>
    </van-popup>
    <div v-if="showTip" class="wrapper">
      <div class="carMask">
        <div class="textCont" v-html="xyCont"></div>
        <div class="maskSure" @click="showTip = false">我已知晓</div>
      </div>
    </div>
    <load v-if="!showCont"></load>
    <getTimeOut v-if="showTimeOut"></getTimeOut>
    <subLoad v-if="showSub"></subLoad>
  </div>
</template>
<script>
import { showSuccessToast, showFailToast, showToast } from "vant";
import { showConfirmDialog } from "vant";
import {
  getPayMoney,
  contractSave,
  orderDetails,
  signingSave,
  getXy,
} from "@/http/api";
import load from "@/components/public/load.vue";
import getTimeOut from "@/components/public/getTimeOut.vue";
import subLoad from "@/components/public/subLoad.vue";
import $ from "jquery";
import WeixinJSBridge from "weixin-js-sdk";

export default {
  components: { subLoad, load, getTimeOut },
  name: "",
  data() {
    return {
      showTip: false,
      xyCont: "",
      showTimeOut: false,
      showCont: false,
      signId: this.$route.query.id,
      showGzMask: false,
      orderInfo: {},
      userType: this.$route.query.type,
      moneyNum: 0,
      showSub: false,
      show_loan_date: false,
      show_repayment_date: false,
      checked: false,
      showCavas: false,
      canvasWidth: 375,
      canvasHeight: 200,
      drawing: false,
      lastX: 0,
      lastY: 0,
      isDrawing: false,
      signText: "",
      formInfo: {
        type: this.$route.query.type,
        loan_money: "",
        repayment_money: "",
        loan_date: "",
        repayment_date: "",
        interest_rate: "",
        other_content: "",
        loan_use: "",
        signature: "",
        name: "",
        mobile: "",
        idcard: "",
        idcarType: "居民身份证",
      },
      // 孩子性别
      sexShow: false,
      sexId: 0,
      sexArr: [
        { name: "男", id: 0 },
        { name: "女", id: 1 },
      ],
      // 获取验证码
      codeText: "获取验证码",
      isGetting: false, //是否正处于获取中
    };
  },
  props: {},
  setup() {},
  methods: {
    setRepayment_money() {
      let totalMoney = 0;
      let loan_money = this.formInfo.loan_money;
      let interest_rate = this.formInfo.interest_rate;
      let loan_date = this.formInfo.loan_date;
      let repayment_date = this.formInfo.repayment_date;
      console.log(this.$converData.checkNumber(loan_money));
      console.log(this.$converData.checkNumber(interest_rate));
      console.log(loan_date);
      console.log(repayment_date);
      console.log(loan_date < repayment_date);
      if (
        !this.$converData.checkNumber(loan_money) &&
        !this.$converData.checkNumber(interest_rate) &&
        loan_date &&
        repayment_date &&
        loan_date < repayment_date
      ) {
        let startDate = new Date(loan_date);
        let endDate = new Date(repayment_date);
        let speedDate =
          (endDate.getTime() - startDate.getTime()) / 1000 / 60 / 60 / 24;

        totalMoney =
          loan_money +
          (loan_money * Number(interest_rate) * speedDate) / 100 / 360;
      }
      this.formInfo.repayment_money = totalMoney.toFixed(2);
    },
    startDrawing(event) {
      this.isDrawing = true;
      const { offsetX, offsetY } = event;
      this.lastX = offsetX;
      this.lastY = offsetY;
    },
    draw(event) {
      if (!this.isDrawing) return;
      const ctx = this.$refs.canvas.getContext("2d");
      const { offsetX, offsetY } = event;
      ctx.beginPath();
      ctx.moveTo(this.lastX, this.lastY);
      ctx.lineTo(offsetX, offsetY);
      ctx.strokeStyle = "black";
      ctx.lineWidth = 2;
      ctx.stroke();
      this.lastX = offsetX;
      this.lastY = offsetY;
    },
    stopDrawing() {
      this.isDrawing = false;
    },
    startDrawingTouch(event) {
      event.preventDefault();
      const touch = event.touches[0];
      const { offsetX, offsetY } = this.getTouchOffset(touch);
      this.startDrawing({ offsetX, offsetY });
    },
    drawTouch(event) {
      event.preventDefault();
      const touch = event.touches[0];
      const { offsetX, offsetY } = this.getTouchOffset(touch);
      this.draw({ offsetX, offsetY });
    },
    getTouchOffset(touch) {
      const rect = this.$refs.canvas.getBoundingClientRect();
      const offsetX = touch.clientX - rect.left;
      const offsetY = touch.clientY - rect.top;
      return { offsetX, offsetY };
    },
    clearCanvas() {
      const ctx = this.$refs.canvas.getContext("2d");
      ctx.clearRect(0, 0, this.canvasWidth, this.canvasHeight);
      this.formInfo.signature = "";
      this.signText = "";
    },
    saveSignature() {
      const canvas = this.$refs.canvas;
      const dataURL = canvas.toDataURL(); // 将 Canvas 转换为图片的 Base64 格式
      this.upload(dataURL);
    },
    isSignatureEmpty() {
      const ctx = this.$refs.canvas.getContext("2d");
      const imageData = ctx.getImageData(
        0,
        0,
        this.canvasWidth,
        this.canvasHeight
      ).data;
      for (let i = 0; i < imageData.length; i += 4) {
        // 如果发现有像素点，则说明签名不为空
        if (imageData[i + 3] !== 0) {
          return false;
        }
      }
      return true;
    },
    dataURLtoFile(dataURL, filename) {
      const arr = dataURL.split(",");
      const mime = arr[0].match(/:(.*?);/)[1];
      const bstr = atob(arr[1]);
      let n = bstr.length;
      const u8arr = new Uint8Array(n);
      while (n--) {
        u8arr[n] = bstr.charCodeAt(n);
      }
      return new File([u8arr], filename, { type: mime });
    },
    async upload(signImg) {
      if (this.isSignatureEmpty()) {
        showToast("签名不能为空");
        return false;
      }
      // return false
      const blob = await this.dataURLtoFile(signImg, "signature.png");
      const formData = new FormData();
      formData.append("file", blob, "signature.png");
      $.ajax({
        url: this.$apis + "/common/Upload/UpImg",
        dataType: "json",
        type: "post",
        processData: false,
        contentType: false,
        data: formData,
        success: (res) => {
          if (res.code == 1) {
            console.log(res);
            let data = res.data;
            this.formInfo.signature = data;
            this.signText = "已签名";
            this.showCavas = false;
          } else {
            showToast(res.msg);
          }
        },
        error: (res) => {
          this.upMoreImgLoad = false;
          showToast("网络请求超时");
        },
      });
    },

    loan_date_comfir(time) {
      this.formInfo.loan_date = this.$converData.getDate(time);
      this.show_loan_date = false;
      this.setRepayment_money();
    },
    repayment_date_comfir(time) {
      this.formInfo.repayment_date = this.$converData.getDate(time);
      this.show_repayment_date = false;
      this.setRepayment_money();
    },
    saveFn() {
      if (this.signId) {
        this.secondSignFn();
      } else {
        this.firstSignFn();
      }
    },
    firstSignFn() {
      let data = this.formInfo;
      console.log(data);
      if (this.$converData.checkNumber(data.loan_money)) {
        showToast("借款金额" + this.$converData.checkNumber(data.loan_money));
        return false;
      } else if (this.$converData.checkNumber(data.repayment_money)) {
        showToast(
          "还款金额" + this.$converData.checkNumber(data.repayment_money)
        );
        return false;
      } else if (Number(data.loan_money) >= Number(data.repayment_money)) {
        showToast("借款金额需低于还款金额");
        return false;
      } else if (this.$converData.checkNumber(data.interest_rate)) {
        showToast(
          "年化利率" + this.$converData.checkNumber(data.interest_rate)
        );
        return false;
      } else if (Number(data.interest_rate) > 24) {
        showToast("年化利率不能超过24%");
        return false;
      } else if (!data.loan_date) {
        showToast("请选择借款日期");
        return false;
      } else if (!data.repayment_date) {
        showToast("请选择还款日期");
        return false;
      } else if (data.loan_date >= data.repayment_date) {
        showToast("还款日期需在借款日期后");
        return false;
      } else if (!data.loan_use) {
        showToast(`请输入借款用途`);
        return false;
      } else if (!data.name) {
        showToast(`请输入姓名`);
        return false;
      } else if (!this.$converData.checkPhone(data.mobile)) {
        showToast("请输入正确手机号");
        return false;
      } else if (this.$converData.checkIdCard(data.idcard)) {
        showToast(this.$converData.checkIdCard(data.idcard));
        return false;
      } else if (!data.signature) {
        showToast("请进行电子签名");
        return false;
      } else if (!this.checked) {
        showToast("请同意并勾选平台协议");
        return false;
      }
      this.showSub = true;
      delete data.idcarType;
      contractSave(data)
        .then((res) => {
          if (res.data.code == 1) {
            if (this.userType == 1) {
              this.wxPayFn(res.data.data.pay_data, res.data.data.contract_id);
            } else {
              this.routerFn(res.data.data.contract_id);
            }
          } else {
            showToast(res.data.msg);
          }
          this.showSub = false;
        })
        .catch(() => {
          this.showSub = false;
        });
    },
    routerFn(id) {
      showConfirmDialog({
        title: "成功提示",
        confirmButtonText: "查看合同",
        message: "合同创建成功，是否立即查看合同详情？",
      })
        .then(() => {
          this.$router.push({
            path: "/orderDetail",
            query: { id: id },
          });
        })
        .catch(() => {});
    },
    wxPayFn(res, id) {
      WeixinJSBridge.invoke(
        "getBrandWCPayRequest",
        {
          appId: res.appId, //公众号ID，由商户传入
          timeStamp: res.timeStamp, //时间戳，自1970年以来的秒数
          nonceStr: res.nonceStr, //随机串
          package: res.package,
          signType: res.signType, //微信签名方式：
          paySign: res.paySign, //微信签名
        },
        (resData) => {
          if (resData.err_msg == "get_brand_wcpay_request:ok") {
            // 使用以上方式判断前端返回,微信团队郑重提示：
            //res.err_msg将在用户支付成功后返回ok，但并不保证它绝对可靠。
            this.routerFn(id);
          } else {
            showFailToast("支付失败");
          }
        }
      );
    },
    getMoney() {
      getPayMoney().then((res) => {
        if (res.data.code == 1) {
          this.moneyNum = res.data.data;
        } else {
          showToast(res.data.msg);
        }
      });
    },
    getXyFn() {
      getXy().then((res) => {
        if (res.data.code == 1) {
          this.xyCont = res.data.data;
        } else {
          showToast(res.data.msg);
        }
      });
    },
    secondSignFn() {
      let data = {
        contract_id: this.signId,
        signing_name: this.formInfo.name,
        signing_mobile: this.formInfo.mobile,
        signing_idcard: this.formInfo.idcard,
        signing_signature: this.formInfo.signature,
      };
      console.log(data);
      if (!data.signing_name) {
        showToast(`请输入姓名`);
        return false;
      } else if (!this.$converData.checkPhone(data.signing_mobile)) {
        showToast("请输入正确手机号");
        return false;
      } else if (this.$converData.checkIdCard(data.signing_idcard)) {
        showToast(this.$converData.checkIdCard(data.signing_idcard));
        return false;
      } else if (!data.signing_signature) {
        showToast("请进行电子签名");
        return false;
      } else if (!this.checked) {
        showToast("请同意并勾选平台协议");
        return false;
      }
      this.showSub = true;
      signingSave(data)
        .then((res) => {
          if (res.data.code == 1) {
            if (this.userType == 1) {
              this.wxPayFn(res.data.data, this.signId);
            } else {
              this.routerFn(this.signId);
            }
          } else {
            showToast(res.data.msg);
          }
          this.showSub = false;
        })
        .catch(() => {
          this.showSub = false;
        });
    },
    getData() {
      let data = {
        contract_id: this.signId,
      };
      orderDetails(data)
        .then((res) => {
          if (res.data.code == 1) {
            this.orderInfo = res.data.data;
            this.userType = res.data.data.type == 1 ? 2 : 1;
            if (res.data.data.is_gz == 2) {
              this.showGzMask = true;
            }
          } else {
            showToast(res.data.msg);
          }
          this.showCont = true;
        })
        .catch(() => {
          this.showTimeOut = true;
          this.showCont = true;
        });
    },
  },
  mounted() {},
  created() {
    this.getMoney();
    this.getXyFn();
    if (this.signId) {
      this.getData();
    } else {
      this.showCont = true;
    }
  },
};
</script>
<style scoped lang="less">
.authContainer {
  background-color: #f3fdfc;
  min-height: 100vh;
  .timeCont {
    box-sizing: border-box;
    padding-bottom: 0.75rem;
  }
  .gzMask {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    color: white;
    z-index: 111;
    display: flex;
    align-items: center;
    justify-content: center;
    .gzImgCont {
      width: 50%;
      text-align: center;
      img {
        width: 100%;
        border-radius: 0.25rem;
      }
      .erweimaText {
        margin-top: 0.25rem;
      }
    }
  }
  .bannerCont {
    width: 100%;
    color: #fff;
    display: flex;
    justify-content: space-between;
    box-sizing: border-box;
    .bannerImg {
      width: 100%;
    }
  }
  .formCont {
    background-color: #fff;
    width: 92%;
    margin: 0 auto;
    position: relative;
    margin-top: -1rem;
    padding: 1rem 4%;
    border-radius: 0.75rem;
    box-sizing: border-box;
    .formTitle {
      font-size: 0.8rem;
      font-weight: bold;
      margin-bottom: 1rem;
      .iconfont {
        color: #05a165;
        font-size: 1rem;
        margin-right: 0.25rem;
        position: relative;
        top: 0.05rem;
      }
    }
    .flexTitle {
      display: flex;
      align-items: center;
      justify-content: space-between;
      .formTitleMust {
        position: relative;
        display: flex;
        .mustIcon {
          font-size: 0.7rem;
          top: 0rem;
          left: -0.4rem;
          position: absolute;
          color: #ff5757;
        }
      }
    }
    .formArea {
      background-color: #eef6f4;
      border-radius: 0.25rem;
    }
    .formInput,
    .textareaItem {
      display: flex;
      padding: 0.75rem 1rem;
      box-sizing: border-box;
      align-items: center;
      width: 100%;
      background-color: #eef6f4;
      margin-bottom: 1rem;
      border-radius: 1.5rem;
      .inputName {
        width: 4rem;
        position: relative;
        .mustIcon {
          font-size: 0.7rem;
          top: 0rem;
          left: -0.4rem;
          position: absolute;
          color: #ff5757;
        }
      }
      input {
        flex: 1;
        width: 3rem;
        border: none;
        background: none;
        outline: none;
      }
      .getCode {
        color: #05a165;
        font-size: 0.6rem;
      }
      .disgetCode {
        color: #ccc;
        font-size: 0.6rem;
      }
    }
    .textareaItem {
      align-items: flex-start;
      .setLineHeight {
        line-height: 1rem;
      }
    }
    .icon-xiala {
      width: 1.5rem;
      font-size: 0.8rem;
      color: #ccc;
      text-align: center;
    }
    .inputOut {
      flex: 1;
      width: 3rem;
      position: relative;
      .inputMask {
        width: 100%;
        height: 100%;
        position: absolute;
        left: 0;
        top: 0;
      }
      input {
        width: 90%;
        border: none;
        background: none;
        outline: none;
      }
    }
  }
  .formDes {
    background-color: #fff;
    width: 92%;
    margin: 0 auto;
    position: relative;
    overflow: hidden;
    padding: 1rem 4%;
    border-radius: 0.25rem;
    box-sizing: border-box;
    .formTitle {
      font-size: 0.75rem;
      font-weight: bold;
      display: flex;
      align-items: center;
      margin-bottom: 0.75rem;
      color: #000;
    }
    .hasTop {
      margin-top: 1.25rem;
    }
    .formInput {
      display: flex;
      box-sizing: border-box;
      // align-items: center;
      width: 100%;
      margin-bottom: 0.5rem;
      color: #000;
      line-height: 1rem;
      .inputName {
        width: 3.5rem;
      }
      .authVal {
        flex: 1;
        width: 2rem;
        text-align: right;
        .signImg {
          height: 40px;
        }
      }
    }
  }
  .hasTop {
    margin-top: 0.75rem;
  }
  .tipCont {
    display: flex;
    width: 92%;
    margin: 0.75rem auto;
    justify-content: space-between;
    align-items: center;
    .linkCont {
      display: flex;
      align-items: center;
      font-size: 0.65rem;
      .checkBtn {
        width: 16px;
        height: 16px;
        border-radius: 0.15rem;
        border: 1px solid #ccc;
        background-color: #fff;
        text-align: center;
        line-height: 16px;
        font-size: 0.6rem;
        color: #fff;
        margin-right: 0.5rem;
      }
      .isCheck {
        background-color: #05a165;
        border: 1px solid #05a165;
      }
      .linkText {
        color: #05a165;
      }
    }
    .payMoney {
      font-size: 0.65rem;
      .redtext {
        color: #ff5757;
      }
    }
  }

  .saveBtn {
    width: 92%;
    margin: 0.75rem auto 0;
    padding: 0.75rem 0;
    text-align: center;
    background-image: linear-gradient(to right, #c7deda, #05a165);
    color: #fff;
    border-radius: 2rem;
  }
  .maskCont {
    padding: 1.5rem 4%;
    box-sizing: border-box;
    .maskHead {
      width: 100%;
      text-align: center;
      font-size: 1rem;
      font-weight: bold;
      margin-bottom: 1.5rem;
    }
    .maskCheck {
      width: 100%;
      display: flex;
      justify-content: space-between;
      flex-wrap: wrap;
      .maskCheckItem {
        width: 46%;
        text-align: center;
        background-color: #f6f7f9;
        padding: 0.65rem 0;
        margin-bottom: 0.75rem;
        border-radius: 0.25rem;
      }
      .maskCheckItemActive {
        background-color: #05a165;
        color: #fff;
      }
    }
    .maskBtn {
      width: 100%;
      text-align: center;
      padding: 0.65rem 0;
      background-color: #05a165;
      border: 1px solid #05a165;
      color: #fff;
      border-radius: 2rem;
      margin-top: 1.5rem;
    }
    .signCont {
      display: flex;
      justify-content: center;
    }
    .cavasTip {
      font-size: 0.6rem;
      margin-top: 0.5rem;
      text-align: center;
      color: #666;
    }
    .cavasCtrl {
      display: flex;
      justify-content: space-between;
      .maskBtn {
        width: 48%;
        border-radius: 0.25rem;
        // margin-left: 0.75rem;
        padding: 0.5rem 0;
      }
      .plainBtn {
        border: 1px solid #05a165;
        background-color: #fff;
        color: #05a165;
      }
    }
  }
  .wrapper {
    position: fixed;
    background-color: rgba(0, 0, 0, 0.5);
    width: 100%;
    z-index: 101;
    height: 100%;
    top: 0;
    left: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    .carMask {
      width: 92%;
      height: 80%;
      background-color: #fff;
      padding: 0.75rem;
      box-sizing: border-box;
      display: flex;
      flex-direction: column;
      border-radius: 0.5rem;
      .textCont {
        width: 100%;
        height: 10rem;
        flex: 1;
        overflow-y: auto;
        padding-bottom: 0.5rem;
        font-size: 0.7rem;
      }
      .maskSure {
        width: 100%;
        color: white;
        text-align: center;
        margin: 1rem auto 0;
        border-radius: 1.1rem;
        background-color: #05a165;
        line-height: 2.2rem;
      }
    }
  }
}
</style>
<style></style>
